<template>
  <div class="basic">
    <div class="basic-one modulebackground">
      <div class="basic-one-top">
        <div class="basic-title">
          <div></div>
          <div>基本信息</div>
        </div>
        <div class="basic-one-top-two">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onSearch"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="basic-one-footer">
        <div>{{ products.type_name }}</div>
        <div>
          <div>套装编码：{{ products.package_number }}</div>
          <div>款号：{{ products.type_no }}</div>
          <div>上新：{{ products.new_year + "-" + products.new_month }}</div>
          <div>分类：{{ products.design_classification }}</div>
        </div>
      </div>
    </div>
    <div class="basic-two modulebackground">
      <div class="basic-two-top">
        <div class="basic-title">
          <div></div>
          <div>价格变动图表</div>
        </div>
      </div>
      <div class="basic-two-content">
        <el-radio-group
          v-model="form.is_switch"
          style="margin-bottom: 30px"
          @change="onSearch"
        >
          <el-radio-button label="0">成衣成本加价总价</el-radio-button>
          <el-radio-button label="1">绣花成本加价总价</el-radio-button>
          <el-radio-button label="2">成本加价总价</el-radio-button>
        </el-radio-group>
        <div class="basic-two-content-right">
          <!-- <div>
            <div style="background: #05bade"></div>
            <div>大货成衣成本加价总价</div>
          </div>
          <div>
            <div style="background: #409eff"></div>
            <div>实付成衣成本加价总价</div>
          </div> -->
        </div>
      </div>
      <div class="basic-two-echarts">
        <div id="postponenum" class="echartsStyleLine"></div>
      </div>
    </div>
    <div class="basic-three modulebackground">
      <div class="basic-three-top">
        <div class="basic-title">
          <div></div>
          <div>加工单详情</div>
        </div>
      </div>
      <div class="basic-three-footer">
        <el-form ref="form" :model="form" label-position="top" class="myform">
          <div>
            <el-form-item label="成本加价总价筛选" class="myform-item">
              <el-input
                placeholder="请输入"
                type="number"
                @keyup.enter.native="onSearch"
                v-model="form.pay_float_lv"
              >
                <template slot="prepend"> ± </template>
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-top: 50px">
              <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
          </div>
          <div></div>
        </el-form>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :cell-style="changeCellStyle"
          :header-cell-style="changeHeaderCellStyle"
          size="mini"
        >
          <el-table-column
            label="成品加工单"
            align="center"
            prop="processing_code"
            fixed
            width="100px"
          ></el-table-column>
          <el-table-column
            label="款号"
            align="center"
            prop="type_no"
            fixed
          ></el-table-column>
          <el-table-column
            label="下单时间"
            align="center"
            prop="add_date"
          ></el-table-column>
          <el-table-column
            label="历史价格变动(本次实付总价-首单实付总价)"
            align="center"
          >
            <el-table-column label="价格差" align="center" prop="pay_float">
              <template slot-scope="{ row }">
                <div v-if="row.pay_float_type == 0" style="color: red">
                  {{ row.pay_float }}
                </div>
                <div v-else style="color: #67c23a">
                  {{ row.pay_float }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="价差比例"
              align="center"
              prop="pay_float_lv"
            >
              <template slot-scope="{ row }">
                <div v-if="row.pay_float_lv == 0 || row.pay_float_lv == null">
                  -
                </div>
                <div v-else-if="row.pay_float_type == 0" style="color: red">
                  {{ (row.pay_float_lv * 100) | numbertwo  }}% <i class="el-icon-top"></i>
                </div>
                <div v-else-if="row.pay_float_type == 1" style="color: #67c23a">
                  {{ (row.pay_float_lv * 100) | numbertwo  }}% <i class="el-icon-bottom"></i>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="大货" align="center">
            <el-table-column
              label="成衣成本加价总价"
              align="center"
              prop="big_garment_cost_plus_total"
            ></el-table-column>
            <el-table-column
              label="绣花成本加价总价"
              align="center"
              prop="big_embroider_cost_plus_total"
            >
            </el-table-column>
            <el-table-column
              label="成本加价总价"
              align="center"
              prop="big_total_plus_total"
            ></el-table-column>
          </el-table-column>
          <el-table-column label="实付" align="center">
            <el-table-column
              label="成衣成本加价总价"
              align="center"
              prop="pay_garment_cost_plus_total"
            ></el-table-column>
            <el-table-column
              label="绣花成本加价总价"
              align="center"
              prop="pay_embroider_cost_plus_total"
            >
            </el-table-column>
            <el-table-column
              label="成本加价总价"
              align="center"
              prop="pay_cost_plus_total"
              width="200"
            >
              <template slot-scope="{ row }">
                <div class="floatlv">
                  <div>
                    {{ row.pay_cost_plus_total }}
                  </div>
                  <!-- <div>
                    <div
                      v-if="row.pay_float_lv == 0 || row.pay_float_lv == null"
                    >
                      -
                    </div>
                    <div v-else-if="row.pay_float_type == 0" style="color: red">
                      {{ (row.pay_float_lv * 100) | numbertwo }}% <i class="el-icon-top"></i>
                    </div>
                    <div
                      v-else-if="row.pay_float_type == 1"
                      style="color: #67c23a"
                    >
                      {{ (row.pay_float_lv * 100) | numbertwo  }}%
                      <i class="el-icon-bottom"></i>
                    </div>
                  </div> -->
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="差价" align="center" prop="difference_price">
            <template slot-scope="{ row }">
              <div
                :style="{
                  color: Number(row.difference_price) >= 0 ? 'red' : '#67C23A',
                }"
              >
                {{ row.difference_price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            align="center"
            prop="countnum"
          ></el-table-column>
          <el-table-column
            label="总价"
            align="center"
            prop="countprice"
          ></el-table-column>
        </el-table>
        <pagination
          :form="form"
          :total="total"
          @paginationPostOrderTaskList="postAdminOtherGetcostprice"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { postAdminOtherGetcostprice } from "@/api";
import { postponenum } from "./postponenum.js";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      datastatistics: "",
      datetime: "",
      products: "",
      form: {
        type_no: "SHF122619",
        is_switch: 0,
        pay_float_lv: 0,
        str_examinetime: "",
        end_examinetime: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
    };
  },
  async mounted() {
    let { form } = this;
    this.form.type_no = this.$route.query.type_no;
    await this.postAdminOtherGetcostprice(form);
  },
  methods: {
    // 采购列表
    async postAdminOtherGetcostprice(data) {
      this.loading = true;
      this.form = data;
      await postAdminOtherGetcostprice(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data.list;
          this.products = res.data.products;
          let table = res.data.table;
          let dateday = table.dateday;
          let big = table.big;
          let pay = table.pay;
          let obj = {
            dateday: [],
            big: [],
            pay: [],
          };
          for (let index = 0; index < dateday.length; index++) {
            obj.dateday.push(dateday[index].dateday);
          }
          for (let index = 0; index < big.length; index++) {
            obj.big.push(Number(big[index].big_price));
          }
          for (let index = 0; index < pay.length; index++) {
            obj.pay.push(Number(pay[index].pay_price));
          }
          this.total = Number(res.total);
          this.postponenum(postponenum(obj));
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      let date = this.datetime;
      if (date) {
        this.form.str_examinetime = date[0];
        this.form.end_examinetime = date[1];
      }
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminOtherGetcostprice(this.form);
    },
    async postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.floatlv {
  display: flex;
  justify-content: center;
  > div {
    width: 120px;
    text-align: center;
  }
  > div:nth-child(2) {
    border-left: 1px solid #efefef;
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }

  &-item {
    margin-right: 10px;
    /deep/ .el-form-item__content {
      display: flex;
    }
  }
}
.echartsStyleLine {
  width: calc(100% - 40px);
  height: 400px;
  background: #fff;
}
.modulebackground {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.basic {
  .basic-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    > div:nth-child(1) {
      width: 4px;
      height: 26px;
      border-radius: 4px;
      background: #409eff;
      margin-right: 10px;
    }
  }
  .basic-one {
    .basic-one-top {
      display: flex;
      justify-content: space-between;
    }
    .basic-one-footer {
      font-size: 14px;
      margin-left: 14px;
      > div:nth-child(1) {
        font-weight: 800;
        height: 40px;
        line-height: 40px;
      }
      > div:nth-child(2) {
        display: flex;
        > div {
          color: #666666;
          padding-right: 10px;
          margin-right: 10px;
          border-right: 1px solid #666666;
        }
      }
    }
  }
  .basic-two {
    .basic-two-content {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .basic-two-content-right {
        display: flex;
        font-size: 15px;
        font-weight: 800;
        > div {
          display: flex;
          align-items: center;
          margin-left: 30px;
          > div:nth-child(1) {
            height: 4px;
            width: 100px;
            margin-right: 10px;
          }
        }
      }
    }
    .basic-two-echarts {
      width: 100%;
    }
  }
  .basic-three {
    .basic-three-footer {
      margin-top: 20px;
    }
  }
}
</style>